<template>
  <div class="paramster-content">
    <rich-text v-if="curElement.type==='richText'"></rich-text>
    <form-text v-if="curElement.type==='text'"></form-text>
    <form-img v-if="curElement.type==='img'"></form-img>
    <form-chart v-if="curElement.type==='chart'"></form-chart>
    <form-template v-if="curElement.type==='template'"></form-template>
    <form-svg v-if="curElement.type==='svg'"></form-svg>
    <form-form v-if="curElement.type==='form'"></form-form>
    <form-group v-if="curElement.type==='group'"></form-group>
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import {
  State,
  Action,
  Getter
} from 'vuex-class'
import RichText from "./extra/RichText.vue"
import FormText from "./extra/FormText.vue"
import FormImg from "./extra/FormImg.vue"
import FormChart from "./extra/formChart"
import FormTemplate from "./extra/FormTemplate.vue"
import FormSvg from "./extra/FormSvg.vue"
import FormForm from "./extra/FormForm.vue"
import FormGroup from "./extra/FormGroup.vue"
@Component({
  components: {
    FormText,
    FormImg,
    FormChart,
    RichText,
    FormSvg,
    FormTemplate,
    FormForm,
    FormGroup
  }
})
export default class Main extends Vue {
  @Getter curElement
  @State curElementId
  @Action actChangeElement
}
</script>
<style lang="less" scoped>
.paramster-content{
  color: #fff;
}
</style>
